/* 修改路由，给路由添加权限 */

import  {createRouter,createWebHashHistory} from 'vue-router'

import Home from '@/components/home/index.vue'
import Login from '@/components/login/index.vue'
import TestPage from '@/components/mytest/testPage/index.vue'
import TestUseRooute1 from '@/components/mytest/testPage/testUseRoute/index1.vue'
import TestUseRooute2 from '@/components/mytest/testPage/testUseRoute/index2.vue'
import ColumnDetail from '@/components/ColumnDetail/ColumnDetail.vue'

import Signup from '@/components/Signup/Signup.vue'

import store from '@/store/index'
import axios from 'axios'

import CreatePost from '@/components/Post/CreatePost/CreatePost.vue'
const routerHistory = createWebHashHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                redictAlreadyLogin: true // 表示是登录页面
            }
        },
        {
            path: '/signup',
            name: 'signup',
            component: Signup
        },
        {
            path: '/test',
            name: 'test',
            component: TestPage
        },
        {
            path: '/useRoute1/:id',
            name: 'useRoute1',
            component: TestUseRooute1
        },
        {
            path: '/useRoute2/:id',
            name: 'useRoute2',
            component: TestUseRooute2
        },
        {
            path: '/columnDetail',
            name: 'columnDetail',
            component: ColumnDetail,
            meta: {
                UnAbleCreate: true,
                requiredLogin: true, // 表示需要登录，才可以访问
            }
        },
        {
            path: '/create',
            name: 'create',
            component: CreatePost,
            meta: {
                UnAbleCreate: true,
                requiredLogin: true, // 表示需要登录，才可以访问
            }
        }
    ]
})
router.beforeEach((to, from, next) => {
    const {user,token} = store.state
    const {requiredLogin,redictAlreadyLogin} = to.meta
    
    if (!user.isLogin) {//如果没有登录
        if (token) { 
            //说明token存在，isLogin却为false，可能是因为刷新vuex数据丢失导致的

            // 判断如果没有登录，但token存在，那么久直接去获取用户的信息
            axios.defaults.headers.common.Authorization = `Bearer ${token}`
            store.dispatch('featchCurrentUser').then(() => {
                // 说明此时token有效

                if (redictAlreadyLogin) {
                    // 判断是否是要跳转到登录页面，因为已经存在有效的token，不需要登录，直接跳转到首页
                    next('/')
                } else {
                    next()
                }
            }).catch(err => {
                // 说明此时token已经失效了,需要重新获取
                next('/login')
                store.commit('loginOut')
            })


        } else { 
            // 连token都不存在，因为有些请求是不需要token的

            if (requiredLogin) {
                // 判断是否需要登录，如果需要登录，因为token不存在了，我们就需要登录，重新获得token
                next('/login')
            } else {
                next()
            }
            
        }

    } else { // 登录的情况下
        if (redictAlreadyLogin) { 
            // 登录的情况下，当再跳转到登录页面时，我们就重定向到首页去
            next('/')
        } else {
            // 登录的情况下，我们要跳到不是登录的其他页面，我们就放行
            next()
        }

    }

})

export default router